<template>
	<div class="system-user-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-menu-search">
				<el-form :inline="true" size="default" :model="queryParams" ref="queryRef">
					<el-form-item label="菜单名称" prop="title">
						<el-input v-model="queryParams.title" placeholder="请输入菜单名称" clearable style="width: 180px" />
					</el-form-item>
					<el-form-item label="组件路径" prop="component">
						<el-input v-model="queryParams.component" placeholder="请输入组件路径" clearable style="width: 180px" />
					</el-form-item>
					<el-form-item>
						<el-button size="default" type="primary" class="ml10" @click="handleQuery">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetQuery(queryRef)">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu(null)" v-auth="'api/v1/system/menu/add'">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							新增菜单
						</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-table
				:data="menuTableData"
				style="width: 100%"
				row-key="path"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				stripe
				size="default"
			>
				<el-table-column label="菜单名称" show-overflow-tooltip>
					<template #default="scope">
						<SvgIcon :name="scope.row.icon" />
						<span class="ml10">{{ scope.row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
				<el-table-column label="组件路径" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.component }}</span>
					</template>
				</el-table-column>
				<el-table-column label="接口规则" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="排序" show-overflow-tooltip width="80" align="center">
					<template #default="scope">
						{{ scope.row.menuSort }}
					</template>
				</el-table-column>
				<el-table-column label="类型" show-overflow-tooltip width="80" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.menuType === 0 ? 'danger' : scope.row.menuType === 1 ? 'success' : 'warning'" size="small"
							>{{ scope.row.menuType === 0 ? '目录' : scope.row.menuType === 1 ? '菜单' : '按钮' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="显示状态" show-overflow-tooltip width="100" align="center">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.isHide === 0" size="small">显示</el-tag>
						<el-tag type="info" v-else size="small">隐藏</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button
							size="small"
							text
							type="primary"
							@click="onOpenAddMenu(scope.row)"
							v-if="scope.row.menuType !== 2"
							v-auth="'api/v1/system/menu/add'"
							>新增
						</el-button>
						<el-button
							size="small"
							text
							type="primary"
							@click="onOpenEditMenu(scope.row)"
							v-auth-all="['api/v1/system/menu/get', 'api/v1/system/menu/edit']"
							>修改
						</el-button>
						<el-button
							size="small"
							text
							type="primary"
							@click="onTabelRowDel(scope.row)"
							v-auth="'api/v1/system/menu/delete'"
							v-if="scope.row.id !== 1"
							>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<EditMenu ref="editMenuRef" @menuList="menuList" :acType="acType" />
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onBeforeMount, reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import EditMenu from '/@/views/system/menu/component/editMenu.vue';
import { delMenu, getMenuList } from '/@/api/system/menu';

export default defineComponent({
	name: 'systemMenuList',
	components: { EditMenu },
	setup() {
		const editMenuRef = ref();
		const queryRef = ref();
		const state = reactive({
			queryParams: {
				title: '',
				component: '',
			},
			menuTableData: [],
		});
		const { proxy } = getCurrentInstance() as any;
		const acType = ref('add');
		// 打开新增菜单弹窗
		const onOpenAddMenu = (row: any) => {
			acType.value = 'add';
			editMenuRef.value.openDialog(row);
		};
		// 打开编辑菜单弹窗
		const onOpenEditMenu = (row: any) => {
			acType.value = 'edit';
			editMenuRef.value.openDialog(row);
		};
		// 删除当前行
		const onTabelRowDel = (row: any) => {
			ElMessageBox.confirm(`此操作将永久删除：“${row.title}”, 是否继续`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delMenu(row.id).then(() => {
						ElMessage.success('删除成功');
						proxy.$refs['editMenuRef'].resetMenuSession();
						menuList();
					});
				})
				.catch(() => {});
		};
		onBeforeMount(() => {
			menuList();
		});
		const handleQuery = () => {
			menuList();
		};
		const menuList = () => {
			getMenuList(state.queryParams).then((res) => {
				state.menuTableData = res.data.rules ?? [];
			});
		};
		/** 重置按钮操作 */
		const resetQuery = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.resetFields();
			menuList();
		};
		return {
			queryRef,
			editMenuRef,
			resetQuery,
			onOpenAddMenu,
			onOpenEditMenu,
			onTabelRowDel,
			menuList,
			handleQuery,
			...toRefs(state),
			acType,
		};
	},
});
</script>
<style scoped lang="scss">
.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>
